<template>
  <el-container class="common-layout">
    <el-aside>
      <MenuCom :flag="flag"></MenuCom>
    </el-aside>
    <el-container>
      <el-header>
        <!--折叠的图标左边-->
        <el-icon @click="flag = !flag">
          <ArrowLeftBold v-if="flag" />
          <ArrowRightBold v-else />
        </el-icon>
        <!--右边写个下拉菜单-->
        <div class="avatar-box" v-if="userInfo">
          <el-space :size="16">
            <span>欢迎您：{{ userInfo.username }}</span>
            <el-dropdown>
              <el-avatar :size="30" :src="circleUrl" />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleDetails"
                    >个人中心</el-dropdown-item
                  >
                  <el-dropdown-item @click="openChangePass"
                    >修改密码</el-dropdown-item
                  >
                  <el-dropdown-item @click="handleLogout"
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-space>
        </div>
      </el-header>
      <el-main>
        <Breadcrumb></Breadcrumb>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

  <!-- 个人中心抽屉 -->
  <!-- <UserinfoDrawer :drawer="drawer"></UserinfoDrawer> -->
  <el-drawer v-model="isShow" :with-header="false">
    <el-form
      :label-position="labelPosition"
      label-width="100px"
      :model="formLabelAlign"
      style="max-width: 460px"
    >
      <el-form-item label="账号">
        <el-input disabled v-model="formLabelAlign.username" />
      </el-form-item>
      <el-form-item label="身份">
        <el-input disabled v-model="formLabelAlign.identity" />
      </el-form-item>

      <el-form-item label="昵称">
        <el-input :disabled="isEdit" v-model="formLabelAlign.nickname" />
      </el-form-item>
      <el-form-item label="性别">
        <el-input :disabled="isEdit" v-model="formLabelAlign.gender" />
      </el-form-item>
      <el-form-item label="年龄">
        <el-input :disabled="isEdit" v-model="formLabelAlign.age" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="isEdit = false">修改信息</el-button>
        <el-button type="primary" @click="handleEdit" v-show="!isEdit"
          >修改完成</el-button
        >
      </el-form-item>
    </el-form>
  </el-drawer>

  <!-- 修改密码弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    title="修改密码"
    width="30%"
    :before-close="closeForm"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="原始密码" prop="oldPass">
        <el-input
          v-model="ruleForm.oldPass"
          type="password"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item label="新密码" prop="pass">
        <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
      </el-form-item>

      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          v-model="ruleForm.checkPass"
          type="password"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="changePass(ruleFormRef)"
          >确认</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ArrowLeftBold, ArrowRightBold } from "@element-plus/icons-vue";
import MenuCom from "../components/MenuCom.vue";
// import UserinfoDrawer from '@/components/UserinfoDrawer.vue';
import { ref, watch, computed, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { logout, changepass } from "../api/user.js";
import type { FormInstance, FormRules } from "element-plus";
import Breadcrumb from "../components/Breadcrumb.vue";

// 引入vuex
const store = useStore();

// 菜单折叠效果
const flag = ref(true);
const computedWid = computed(() => {
  return flag.value ? "300px" : "64px";
});
// 用户信息
const userInfo = reactive(store.state.userInfo);

// 退出按钮
const router = useRouter();
function handleLogout() {
  logout(userInfo?.id).then(() => {
    router.push("/login");
    sessionStorage.removeItem("token");
  });
}
// 用户头像
const circleUrl = ref(
  "https://img1.baidu.com/it/u=956907512,1045902883&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681664400&t=62280d3d508625c482722e856c88fffd"
);

// 监听路由
const route = useRoute();
watch(
  route,
  () => {
    store.commit("updateCurrentPath", route.path);
  },
  {
    immediate: true,
  }
);

// 个人中心
let isShow = ref(false);
let isEdit = ref(true);
// 个人中心表单初始数据
let formLabelAlign = reactive({
  username: "",
  nickname: "",
  gender: "",
  age: 0,
  identity: "",
});
function handleDetails() {
  isShow.value = true;
  // 给详情表格赋值
  formLabelAlign.username = userInfo.username;
  formLabelAlign.nickname = userInfo.nickname;
  formLabelAlign.gender = userInfo.gender;
  formLabelAlign.age = userInfo.age;
  formLabelAlign.identity = userInfo.identity;
}
const labelPosition = ref("right");
// 个人中心编辑功能
function handleEdit() {
  isEdit.value = true;
  const editData = reactive({
    id: Number(userInfo.id),
    age: Number(formLabelAlign.age),
    gender: formLabelAlign.gender,
    nickname: formLabelAlign.nickname,
  });

  console.log("age类型", editData.age, typeof editData.age);
}

// 修改密码
const dialogVisible = ref(false);
function openChangePass() {
  dialogVisible.value = true;
}
const validateOldpass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入原始密码！"));
  } else {
    callback();
  }
};
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入新密码！"));
  } else {
    if (ruleForm.checkPass !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("checkPass", () => null);
    }
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== ruleForm.pass) {
    callback(new Error("两次密码不匹配!"));
  } else {
    callback();
  }
};
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  oldPass: "",
  pass: "",
  checkPass: "",
});
const rules = reactive<FormRules>({
  oldPass: [{ required: true, validator: validateOldpass, trigger: "blur" }],
  pass: [{ required: true, validator: validatePass, trigger: "blur" }],
  checkPass: [{ required: true, validator: validatePass2, trigger: "blur" }],
});
function resetForm(formEl: FormInstance | undefined) {
  dialogVisible.value = false;
  formEl?.resetFields?.();
}
// 确定修改密码
function changePass(formEl: FormInstance | undefined) {
  changepass(userInfo.id,{
    oldPassword: ruleForm.oldPass,
    newPassword: ruleForm.pass,
    rNewPassword: ruleForm.checkPass,
  }).then((res) => {
    console.log(res);
  });
  resetForm(formEl);
}
function closeForm() {
  dialogVisible.value = false;
  ruleFormRef.value?.resetFields();
}
</script>

<style lang="scss" scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dcdfe6;
}

.common-layout {
  height: 100%;
  .el-aside {
    height: 100%;
    width: v-bind(computedWid);
    transition: 0.5s;
    .el-menu {
      height: 100%;
    }
  }
}
</style>
